<template>
  <div class="learning-list">
    <el-input
      v-model="topic"
      placeholder="输入想学习的主题..."
      class="topic-input"
    >
      <template #append>
        <el-button @click="generateList">生成学习清单</el-button>
      </template>
    </el-input>

    <el-table v-if="learningList.length" :data="learningList">
      <el-table-column prop="question" label="问题" />
      <el-table-column prop="difficulty" label="难度" width="100">
        <template #default="{ row }">
          <el-rate v-model="row.difficulty" disabled />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button @click="viewDetail(row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useQuestionStore } from '../stores/question'

const topic = ref('')
const learningList = ref([])
const questionStore = useQuestionStore()

const generateList = async () => {
  if (!topic.value) return
  learningList.value = await questionStore.getLearningList(topic.value)
}

const viewDetail = (question) => {
  // 实现查看详情的逻辑
}
</script>

<style scoped>
.learning-list {
  margin-top: 20px;
}

.topic-input {
  margin-bottom: 20px;
}
</style> 